<template>
  <div class="order">
    <div class="list">
        <ul>
            <li v-for="(item,index) in list" :key="index" @click="change(index)" :class="{active:currentIndex == index}">
            {{item}}
            </li>
        </ul>

    </div>
    <div class="nav">
        <img src="../assets/logo.png" alt="">
        <div class="font">
            <span>$17.8</span>
            <button>再来一单</button>
        </div>
    </div>
  </div>
</template>

<script>

export default {
    data(){
        return{
            list:[
                "全部","代消费","待评价","退款"
            ],
            currentIndex:0
        }
    },
    methods:{
        change(index){
            this.currentIndex = index;
        }
    },
    created(){
        console.log('Order组件已创建');
    },
    mounted(){
        console.log('Order组件已挂载');
    },
    destroyed(){
        console.log('Order组件已销毁');
    },
    activated(){
        console.log('Order组件已激活');
    },
    deactivated(){
        console.log('Order组件已缓存');
    }
}
</script>

<style scoped>
    
    .list ul{
        width: 100%;
        list-style: none;
        display: flex;
    }
    .list li{
        height: 30px;
        width: 60px;
        line-height: 30px;
        text-align: center;
        border-bottom: 2px solid transparent;
    }
    .list .active{
        border-bottom: 2px solid skyblue;
        font-weight: bold;
    }
    .nav{
        width: 98%;
        height: 80px;
        display: flex;
        margin: 20px 6px;
        background: #f5f5f5;
        
    }
    .nav .font{
        width: 70%;
        height: 80px;
        /* background-color: antiquewhite; */
    }
    .nav img{
        width: 80px;
        height: 80px;
    }
    .font span{
        float: right;
        margin: 10px 5px;
    }
    button{
        float: right;
        margin: 50px 0;
        width: 60px;
        height: 30px;
        background-color: #fff;
        border: 1px solid skyblue;
        border-radius: 12px;
    }
</style>